<template>
    <div>
      <!-- 工具栏 -->
      <el-row type="flex" justify="end" style="margin-bottom: 20px;">
        <el-button type="primary" @click="handleAddBook">新增图书</el-button>
        <el-button type="success" @click="handleImportBooks">导入图书</el-button>
      </el-row>
  
      <!-- 图书列表 -->
      <el-table :data="books" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="publishDate" label="出版日期"></el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="mini" @click="handleEditBook(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDeleteBook(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 新增图书对话框 -->
      <el-dialog :visible.sync="dialogVisible" title="新增图书">
        <el-form :model="newBook">
          <el-form-item label="标题" required>
            <el-input v-model="newBook.title"></el-input>
          </el-form-item>
          <el-form-item label="作者" required>
            <el-input v-model="newBook.author"></el-input>
          </el-form-item>
          <el-form-item label="出版日期">
            <el-date-picker v-model="newBook.publishDate" type="date"></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveBook">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  
  export default {
    setup() {
      const books = ref([
        // 初始图书数据
      ]);
  
      const dialogVisible = ref(false);
      const newBook = ref({
        id: null,
        title: '',
        author: '',
        publishDate: ''
      });
  
      const handleAddBook = () => {
        newBook.value = { id: null, title: '', author: '', publishDate: '' };
        dialogVisible.value = true;
      };
  
      const handleImportBooks = () => {
        // 导入图书逻辑
        ElMessage.info('导入图书功能暂未实现');
      };
  
      const handleSaveBook = () => {
        // 保存图书逻辑
        books.value.push({ ...newBook.value, id: Date.now() });
        dialogVisible.value = false;
        ElMessage.success('图书保存成功');
      };
  
      const handleEditBook = (row) => {
        newBook.value = { ...row };
        dialogVisible.value = true;
      };
  
      const handleDeleteBook = (row) => {
        books.value = books.value.filter(book => book.id !== row.id);
        ElMessage.success('图书删除成功');
      };
  
      return {
        books,
        dialogVisible,
        newBook,
        handleAddBook,
        handleImportBooks,
        handleSaveBook,
        handleEditBook,
        handleDeleteBook
      };
    }
  };
  </script>
  
  <style scoped>
  /* 添加一些样式 */
  </style>